<template>
    <div class="admin-paiban">
        <div class="admin-paiban-case">
            <div class="paiban-top">
                <div class="paiban-top-left">
                    <div class="paiban-top-left-title">
                        选择排班科室医生
                    </div>
                    <div class="paiban-top-left-search">
                        <el-select style="width:200px;margin-right:12px" v-model="ksform.bh" placeholder="请选择科室">
                            <el-option v-for="(item,i) in vbmbjArr" :key="i" :label="item.mc" :value="item.bh"></el-option>
                        </el-select>
                        <el-button type="primary" :icon="Search" @click="searchClick" style="width:72px">查询</el-button>
                    </div>
                        <!-- 表格 -->
                    <xinpuTableGrid
                        ref="xinpuGrid"
                        :editConfig = "editConfig"
                        :loading="loading"
                        :tableHeight="tableHeight"
                        :tableWidth="tableWidth"
                        :columnsData="columns"
                        :clickTransfer="true"
                        @clickTransferData="clickTransferData"
                        :data="data"
                        :border="true"
                    >
                    </xinpuTableGrid>
                </div>
                <div class="paiban-top-middle">
                    <div class="paiban-top-middle-title">
                        选择排班班次
                    </div>
                    <div class="paiban-top-middle-middle">
                        <img src="../../../assets/images/banci_icon.png" style="width:16px;height:16px;margin-right:4px" alt="" srcset="">
                        <div>班次管理</div>
                    </div>
                    <xinpuTableGrid
                        ref="xinpuGridbanci"
                        :loading="loadingbanci"
                        :tableHeight="tableHeightbanci"
                        :tableWidth="tableWidthbanci"
                        :columnsData="columnsbanci"
                        :data="databanci"
                        :border="true"
                    >
                    </xinpuTableGrid>
                </div>
            </div>     
            <div class="paiban-bottom">
                <div class="button-case">
                    <div @click="addData" class="button-case-box">
                        <img
                        src="../../../assets/images/add_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>新增</div>
                    </div>
                    <div @click="deleteClick" class="button-case-box">
                        <img
                        src="../../../assets/images/del_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>删除</div>
                    </div>
                    <div @click="saveClick" class="button-case-box">
                        <img
                        src="../../../assets/images/save_icon.png"
                        style="width: 16px; height: 16px; margin-right: 2px"
                        alt=""
                        srcset=""
                        />
                        <div>保存</div>
                    </div>
                </div>
                <xinpuTableGrid
                    ref="xinpuGriddibu"
                    :loading="loadingdibu"
                    :tableHeight="tableHeightdibu"
                    :tableWidth="tableWidthdibu"
                    :columnsData="columnsdibu"
                    :data="datadibu"
                    :border="true"
                    @updataSelect="updataSelect"
                    @selectCheckedChange="selectCheckedChange"
                >
                </xinpuTableGrid>
            </div>
        </div>
    </div>
</template>

<script setup>
import selectCheckedTable from "@/components/selectCheckedTable/index.vue";
import { ElMessage } from 'element-plus'
import { ref, onMounted } from "vue";
import {Search} from '@element-plus/icons-vue'
const editConfig = ref({
    trigger: 'click', 
    mode: 'cell', 
    showIcon: false,
    beforeEditMethod ({ row }) {
        return false
    }
})
const ksform = ref({
  bh:'',
  ryxm:''
})
const loading = ref(false)
const tableHeight = ref(370)
const tableWidth = ref(630)
const vbmbjArr = ref([])
const columns = ref([
  { type: "checkbox", width: 48 },
  { field: "bmbm_1", 
    title: "科室", 
    width: 220,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'bh',
      label:'mc'
    },
  },
  { field: "ryxm", title: "医生", width: 100 },
  { field: "ghlb",
    title: "挂号类别",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  { field: "zsbm",
    title: "诊室",
    width: 120,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'bh',
      label:'mc'
    },
  },
])
const data = ref([])
const xinpuGrid = ref(null)
const xinpuGridbanci = ref(null)
const loadingbanci = ref(false)
const tableHeightbanci = ref(370)
const tableWidthbanci = ref(document.body.clientWidth - 254 - 630 - 24 - 552)
const columnsbanci = ref([
  { type: "checkbox", width: 48 },
  { field: "id", title: "编号", width: 50 },
  { field: "workname", title: "名称", width: 100 },
  { field: "starttime", title: "开始时间"},
  { field: "endtime", title: "结束时间"},
  { field: "remark", title: "备注", width: 400 },
])
const databanci = ref([])

const loadingdibu = ref(false)
const tableHeightdibu = ref(document.body.clientWidth - 1550)
const tableWidthdibu = ref(document.body.clientWidth - 254)
const columnsdibu = ref([
  { type: "checkbox", width: 48 },
  { 
    field: "bmbm", 
    title: "科室",
    width:140,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'bh',
      label:'mc'
    },
  },
  { 
    field: "ysbm", 
    title: "医生",
    width:100,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'value',
      label:'label'
    },
  },
  { 
    field: "zyd",
    title: "诊室",
    width:140,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [],
      objKey:'bh',
      label:'mc'
    },
  },
  { field: "workmonth", 
    title: "就诊日",
    width:100,
    editRender: {},
    cardArr:[],
    selectName:'selectCheckedTable',
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        }
      ],
      data: [
        {
          bh:'1'
        },
        {
          bh:'2'
        },
        {
          bh:'3'
        },
        {
          bh:'4'
        },
        {
          bh:'5'
        },
        {
          bh:'6'
        },
        {
          bh:'7'
        },
        {
          bh:'8'
        },
        {
          bh:'9'
        },
        {
          bh:'10'
        },
        {
          bh:'11'
        },
        {
          bh:'12'
        },
        {
          bh:'13'
        },
        {
          bh:'14'
        },
        {
          bh:'15'
        },
        {
          bh:'16'
        },
        {
          bh:'17'
        },
        {
          bh:'18'
        },
        {
          bh:'19'
        },
        {
          bh:'20'
        },
        {
          bh:'21'
        },
        {
          bh:'22'
        },
        {
          bh:'23'
        },
        {
          bh:'24'
        },
        {
          bh:'25'
        },
        {
          bh:'26'
        },
        {
          bh:'27'
        },
        {
          bh:'28'
        },
        {
          bh:'29'
        },
        {
          bh:'30'
        },
        {
          bh:'31'
        },
      ],
      objKey:'bh',
      label:'bh',
      feedbackKey:'bh',//回显字段
    },
  },
  { field: "workweek", 
    title: "就诊周",
    width:100,
    editRender: {},
    cardArr:[],
    selectName:'selectCheckedTable',
    selectOption: {
      fields: [
        {
          prop: "bh",
          label: "代码",
          width: 100,
        }
      ],
      data: [
        {
          bh:'1'
        },
        {
          bh:'2'
        },
        {
          bh:'3'
        },
        {
          bh:'4'
        },
        {
          bh:'5'
        },
        {
          bh:'6'
        },
        {
          bh:'7'
        },
      ],
      objKey:'bh',
      label:'bh',
      feedbackKey:'bh',//回显字段
    },
  },
  { field: "workdatetime",width:100, title: "就诊日期", editRender: { name: "input" } },
  { field: "worktimecode", 
    title: "出诊时段",
    width:100,
  },
  { field: "starttime",width:140, title: "开始时间" },
  { field: "endtime",width:140, title: "结束时间" },
  { field: "sfty", 
    title: "是否停用",
    width:100,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "dm",
          label: "代码",
          width: 100,
        },
        {
          prop: "mc",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          dm:'0',
          mc:'否'
        },
        {
          dm:'1',
          mc:'是'
        }
      ],
      objKey:'dm',
      label:'mc'
    },
  },
  {
    field: "pbms",
    title: "排班模式",
    width: 100,
    editRender: {},
    selectName:'selectTable',
    selectOption: {
      fields: [
        {
          prop: "value",
          label: "代码",
          width: 100,
        },
        {
          prop: "label",
          label: "名称",
          width: 200,
        }
      ],
      data: [
        {
          label:'周',
          value:'1'
        },
        {
          label:'月',
          value:'2'
        },
        {
          label:'临时',
          value:'3'
        },
      ],
      objKey:'value',
      label:'label'
    },
  },
])
const datadibu = ref([])
const xinpuGriddibu = ref(null)

const deleteClick = async()=>{
  const arr = xinpuGriddibu.value.removeTable();
  console.log(arr);
  if(arr && arr.length>0){
    let result = []
    arr.forEach(item=>{
      if(item.saveFlag == 1){
        datadibu.value.forEach((v,j)=>{
          if(item._X_ROW_KEY == v._X_ROW_KEY){
            datadibu.value.splice(j,1)
          }
        })
      }else{
        item.saveFlag = 3
        result.push(item)
      }
    })
    if(result.length>0){
      const res = await window.xinpuHttpApi('200056',{'list':result},'mzhttphosptalserver')

      if(res && res.Flag){
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
        datadibu.value = []
      }
    }else{
      ElMessage({
          message: '删除成功',
          type: 'success',
      })
    }
  }else{
    ElMessage({
        message: '请选择要删除的数据',
        type: 'warning',
    })
  }
}
const saveClick = async()=>{
  if(datadibu.value && datadibu.value.length>0){
    datadibu.value.forEach(v=>{
      if(v.saveFlag !== 1){
        v.saveFlag = 2
      }
    })
    const res = await window.xinpuHttpApi('200056',{'list':datadibu.value},'mzhttphosptalserver')
    if(res && res.Flag){
      ElMessage({
          message: '保存成功',
          type: 'success',
      })
      datadibu.value = []
    }
  }else{
    ElMessage({
        message: '当前没有要保存和新增的数据',
        type: 'warning',
    })
  }
}
const addData = ()=>{
  const item = xinpuGrid.value.removeTable();
  console.log(item);
  if(item && item.length>0){
    const itembanci = xinpuGridbanci.value.removeTable();
    console.log(itembanci);
    if(itembanci && itembanci.length>0){
      item.forEach(item=>{
        itembanci.forEach(it=>{
          datadibu.value.push({
            bmbm: item.bmbm_1,
            endtime: it.endtime,
            id: 0,
            pbms: "1",
            saveFlag: 1,
            sfty: 0,
            starttime: it.starttime,
            tzbh: null,
            workdatetime: null,
            workmonth: '',
            worktimecode: it.workname,
            workweek: '',
            xpsm_zth: "",
            ysbm: item.rybm,
            zyd: item.zsbm,
            _X_ROW_KEY: ""
          })
        })
      })
    }else{
      ElMessage({
        message: '请选择班次管理',
        type: 'warning',
      })
    }
  }else{
    ElMessage({
        message: '请选择排班科室医生',
        type: 'warning',
    })
  }
}

const savepaiban = async()=>{
  let flag = false
  datadibu.value.forEach(v=>{
    if(v.saveFlag == 1){
      flag = true
    }
  })
  if(flag){
    const res = await window.xinpuHttpApi('200052',{'list':datadibu.value},'mzhttphosptalserver')
    if(res && res.Flag){
      datadibu.value = []
      ElMessage({
          message: '保存排班成功',
          type: 'success',
      })
    }
  }else{
    const arr = xinpuGriddibu.value.getEditData();
    arr.forEach(v=>{
      v.saveFlag = 2
    })
    const res = await window.xinpuHttpApi('200052',{'list':arr},'mzhttphosptalserver')
    if(res && res.Flag){
      datadibu.value = []
      ElMessage({
          message: '保存排班成功',
          type: 'success',
      })
    }
  }
}
const searchClick = ()=>{
    getData()
}
const deletepaibandibu = ()=>{
  const arr = xinpuGriddibu.value.removeTable();
  console.log(arr);
  console.log(datadibu.value);
  let flag = false
  arr.forEach(v=>{
    if(v.id == 0){
      flag = true
    }
  })
  if(flag){
    arr.forEach(it=>{
      datadibu.value.forEach((item,i)=>{
        if(it._X_ROW_KEY == item._X_ROW_KEY){
          datadibu.value.splice(i,1)
        }
      })
    })
  }else{
    ElMessage({
        message: '已经保存的不能删除，请修改或者停诊',
        type: 'warning',
    })
  }
}

const clickTransferData = async(column)=>{
  const res = await window.xinpuHttpApi('200057',{'bmbm':column.row.bmbm_1,'ysbm':column.row.rybm},'mzhttphosptalserver')
  console.log(res);
  if(res && res.Flag){
    let cardArr = []
    let cardArrs = []
    datadibu.value = res.ReContent
    res.ReContent.forEach(v=>{
      if(v.workmonth){
        for (let i = 0; i < v.workmonth.length; i++) {
            cardArr.push({
              bh:v.workmonth[i]
            })
        }
        columnsdibu.value[3].cardArr = cardArr
      }
      if(v.workweek){
        for (let i = 0; i < v.workweek.length; i++) {
            cardArrs.push({
              bh:v.workweek[i]
            })
        }
        columnsdibu.value[4].cardArr = cardArrs
      }
    })
  }
}

const getbmData = (async()=>{
  const res = await window.xinpuHttpApi('102001',{})
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'bmbm_1'){
        v.selectOption.data = res.ReContent
      }
    })
    columnsdibu.value.forEach(v=>{
      if(v.field == 'bmbm'){
        v.selectOption.data = res.ReContent
      }
    })
  }
})

const getghlbData = async ()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_mzlb"});
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'ghlb'){
        v.selectOption.data = res.ReContent
      }
    })
    columnsdibu.value.forEach(v=>{
      if(v.field == 'ghlb'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}

const getzsbmData = async ()=>{
  const res = await window.xinpuHttpApi('100228',{
    "MyPaginationDto":{
        PageNo:1,
        PageSize:9999,
        OrderByname:'bh',
        isDesc:false
    },
    "InParamDXmxx":{
        lsmc:''
    }
  })
  console.log(res);
  if(res && res.Flag){
    columns.value.forEach(v=>{
      if(v.field == 'zsbm'){
        v.selectOption.data = res.ReContent.Content
      }
    })
    columnsdibu.value.forEach(v=>{
      if(v.field == 'zyd'){
        v.selectOption.data = res.ReContent.Content
      }
    })
  }
}

// 获取医生人员
const getysbmData = async()=>{
  const res = await window.xinpuWebsApi('GetFixCode', { "bh":"xp_ry_002"});
  console.log(res);
  if(res && res.Flag){
    columnsdibu.value.forEach(v=>{
      if(v.field == 'ysbm'){
        v.selectOption.data = res.ReContent
      }
    })
  }
}

// 获取排班规则
const getSchedulingRule = (async()=>{
  const res = await window.xinpuHttpApi('200058',{'name':''},'mzhttphosptalserver')
  console.log(res);
  if(res && res.Flag){
    databanci.value = res.ReContent
  }
})

// 下拉框需要修改的数据
const updataSelect = (val, column) => {
  if(column.column && column.column.field == 'bmbm'){
    let resultIndex = columnsdibu.value[column.columnIndex].field;
    datadibu.value[column.rowIndex][resultIndex] = val.bh;
  }
  if(column.column && column.column.field == 'zyd'){
    let resultIndex = columnsdibu.value[column.columnIndex].field;
    datadibu.value[column.rowIndex][resultIndex] = val.bh;
  }
  if(column.column && column.column.field == 'sfty'){
    let resultIndex = columnsdibu.value[column.columnIndex].field;
    datadibu.value[column.rowIndex][resultIndex] = val.dm;
  }
  if(column.column && column.column.field == 'ghlb'){
    let resultIndex = columnsdibu.value[column.columnIndex].field;
    datadibu.value[column.rowIndex][resultIndex] = val.value;
  }
  if(column.column && column.column.field == 'pbms'){
    let resultIndex = columnsdibu.value[column.columnIndex].field;
    datadibu.value[column.rowIndex][resultIndex] = val.value;
  }
};

// 下拉选择框需要修改的数据
const selectCheckedChange = (val, column) => {
  console.log(val);
  if(column.column && column.column.field == 'workmonth'){
    if(val){
      let arr = []
      let str = ''
      val.forEach(v=>{
        arr.push(v.bh)
      })
      str = arr.join(',')
      columnsdibu.value[column.columnIndex].cardArr = val
      let resultIndex = columnsdibu.value[column.columnIndex].field;
      datadibu.value[column.rowIndex][resultIndex] = str;
    }
  }
  if(column.column && column.column.field == 'workweek'){
    if(val){
      let arr = []
      let str = ''
      val.forEach(v=>{
        arr.push(v.bh)
      })
      str = arr.join(',')
      columnsdibu.value[column.columnIndex].cardArr = val
      let resultIndex = columnsdibu.value[column.columnIndex].field;
      datadibu.value[column.rowIndex][resultIndex] = str;
    }
  }
};


const getData = (async()=>{
  loading.value = true
  const res = await window.xinpuHttpApi('100345',ksform.value)
  console.log(res);
  let arr = []
  if(res && res.Flag){
    res.ReContent.forEach(item=>{
        if(item.wx_sfxs == 1){ 
            arr.push(item)
        }
    })
    data.value = arr
  }
  loading.value = false
})

function getDatesInRange(startDate, endDate) {
  const dateArray = [];
  let currentDate = new Date(startDate);
 
  while (currentDate <= new Date(endDate)) {
    // 将当前日期的字符串表示添加到数组中
    dateArray.push(currentDate.toISOString().split('T')[0]);
    // 增加一天
    currentDate.setDate(currentDate.getDate() + 1);
  }
 
  return dateArray;
}
onMounted(async() => {
  getData()
  getbmData()
  getghlbData()
  getzsbmData()
  getSchedulingRule()
  getysbmData()
});
</script>

<style lang="scss" scoped>
.button-case{
display: flex;
align-items: center;
border-top: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
border-right: 1px solid #EBEBEB;
border-radius: 4px 4px 0px 0px;
height: 40px;
padding-left: 12px;
font-size: 14px;
.button-case-box{
    display: flex;
    align-items: center;
    margin-right: 12px;
}
}
.admin-paiban{
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 83px);
  background: #f7f7f7;
  .admin-paiban-case{
    width: 100%;
    height: calc(100vh - 100px);
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    .paiban-top{
        width: 100%;
        height: 474px;
        border-radius: 4px 4px 0px 0px;
        border: 1px solid #EBEBEB;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .paiban-top-left{
            flex: 0 0 630px;
            height: 450px;
            margin-right: 12px;
            .paiban-top-left-title{
                width: 100%;
                height: 40px;
                border: 1px solid #EBEBEB;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 12px;
                box-sizing: border-box;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                border-radius: 4px 4px 0px 0px;
            }
            .paiban-top-left-search{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 12px;
                box-sizing: border-box;
                border-left: 1px solid #EBEBEB;
                border-right: 1px solid #EBEBEB;
            }
        }
        .paiban-top-right{
            flex: 0 0 524px;
            height: 450px;
            .paiban-top-right-title{
                width: 100%;
                height: 40px;
                border: 1px solid #EBEBEB;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 12px;
                box-sizing: border-box;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                border-radius: 4px 4px 0px 0px;
            }
            .paiban-top-right-btn{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .paiban-top-right-btn-left{
                    display: flex;
                    align-items: center;
                    font-weight: bold;
                    font-size: 14px;
                    color: #333333;
                }
                .paiban-top-right-btn-right{
                    width: 52px;
                    height: 32px;
                    border-radius: 4px;
                    border: 1px solid #EBEBEB;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 400;
                    font-size: 14px;
                    color: #333333;
                }
            }
            .paiban-top-right-week{
                display: flex;
                align-items: center;
                width: 100%;
                margin-top: 12px;
                margin-bottom: 4px;
                .paiban-top-right-week-btn{
                    width: 68px;
                    height: 32px;
                    background: #F7F7F7;
                    border-radius: 4px 4px 4px 4px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 400;
                    font-size: 12px;
                    color: #333333;
                    margin-right: 4px;
                }
                .paiban-top-right-week-btn:last-child{
                    margin-right: 0 !important;
                }
            }
        }
        .paiban-top-middle{
            flex:1;
            height: 450px;
            overflow: hidden;
            .paiban-top-middle-title{
                width: 100%;
                height: 40px;
                border: 1px solid #EBEBEB;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 12px;
                box-sizing: border-box;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                border-radius: 4px 4px 0px 0px;
            }
            .paiban-top-middle-middle{
                width: 100%;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                padding-left: 12px;
                box-sizing: border-box;
                border-left: 1px solid #EBEBEB;
                border-right: 1px solid #EBEBEB;
                font-size: 14px;
                color: #333333;
            }
        }
    }
    .generate-case{
        width: 100%;
        height: 40px;
        border-radius: 0px 0px 4px 4px;
        border-left: 1px solid #EBEBEB;
        border-right: 1px solid #EBEBEB;
        border-bottom: 1px solid #EBEBEB;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 12px;
        box-sizing: border-box;
        .generate-case-box{
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #333333;
        }
        .generate-case-btn{
            width: 114px;
            height: 32px;
            background: #359DE1;
            font-size: 14px;
            color: #FFFFFF;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
    }
    .paiban-bottom{
        margin-top: 12px;
        width: 100%;
        height: calc(100vh - 609px);
        overflow: hidden;
        .paiban-bottom-search{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            padding-left: 12px;
            box-sizing: border-box;
            border: 1px solid #EBEBEB;
            border-radius: 4px 4px 0 0;
            font-size: 14px;
            color: #333333;
        }
        .paiban-bottom-btn{
            display: flex;
            align-items: center;
            width: 100%;
            height: 40px;
            padding-left: 12px;
            box-sizing: border-box;
            border-left: 1px solid #EBEBEB;
            border-right: 1px solid #EBEBEB;
            font-size: 14px;
            color: #333333;
        }
    }
  }
}
.wrap {
    width: 100%;
    // height: 305px;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.span {
    width: 68px;
    height: 46px;
    background: #F7F7F7;
    border-radius: 4px 4px 4px 4px;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    margin-bottom: 5px;
    &.active {
      background: #359DE1;
      color: #fff;
    }
 
    &.noclick {
      pointer-events: none;
      background: #F7F7F7;
      color: #CCCCCC;
    }
 
    &.kong {
      background: #fff;
      pointer-events: none;
    }
  }
.span:nth-child(7n){
    margin-right: 0 !important;
}

</style>